"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  Search,
  MapPin,
  DollarSign,
  Users,
  MessageCircle,
  ArrowLeft,
  Lightbulb,
  TrendingUp,
  Clock,
  Eye,
  Heart,
  Bookmark,
} from "lucide-react"

export default function FindProjectPage() {
  const router = useRouter()
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedCategory, setSelectedCategory] = useState("all")
  const [selectedStage, setSelectedStage] = useState("all")
  const [selectedFunding, setSelectedFunding] = useState("all")

  const projects = [
    {
      id: 1,
      title: "AI智能学习助手",
      description: "基于大语言模型的个性化学习平台，为学生提供智能辅导和学习规划",
      category: "教育科技",
      stage: "MVP阶段",
      funding: "种子轮",
      fundingAmount: "500万",
      location: "北京",
      founder: {
        name: "李明",
        avatar: "/placeholder.svg?height=40&width=40",
        title: "前字节跳动AI工程师",
      },
      teamSize: 5,
      lookingFor: ["技术合伙人", "产品经理"],
      highlights: ["已有10万用户", "月增长率30%", "知名投资机构关注"],
      tags: ["AI", "教育", "SaaS"],
      postedDate: "3天前",
      views: 1250,
      likes: 89,
      bookmarks: 34,
      equity: "5-15%",
      commitment: "全职",
    },
    {
      id: 2,
      title: "绿色出行共享平台",
      description: "整合多种绿色出行方式的一站式平台，包括共享单车、电动车、公交等",
      category: "出行交通",
      stage: "产品验证",
      funding: "天使轮",
      fundingAmount: "200万",
      location: "深圳",
      founder: {
        name: "王小雨",
        avatar: "/placeholder.svg?height=40&width=40",
        title: "前滴滴产品总监",
      },
      teamSize: 8,
      lookingFor: ["市场营销", "商务拓展"],
      highlights: ["覆盖5个城市", "日活用户2万", "政府支持项目"],
      tags: ["出行", "环保", "共享经济"],
      postedDate: "1周前",
      views: 890,
      likes: 67,
      bookmarks: 23,
      equity: "3-8%",
      commitment: "兼职可",
    },
    {
      id: 3,
      title: "智能家居控制系统",
      description: "基于IoT技术的全屋智能控制系统，支持语音控制和AI自动化场景",
      category: "智能硬件",
      stage: "规模化",
      funding: "A轮",
      fundingAmount: "2000万",
      location: "杭州",
      founder: {
        name: "张强",
        avatar: "/placeholder.svg?height=40&width=40",
        title: "前华为硬件专家",
      },
      teamSize: 15,
      lookingFor: ["销售总监", "渠道经理"],
      highlights: ["已签约100+地产商", "年收入5000万", "专利技术20+"],
      tags: ["IoT", "智能家居", "硬件"],
      postedDate: "5天前",
      views: 2100,
      likes: 156,
      bookmarks: 78,
      equity: "1-3%",
      commitment: "全职",
    },
    {
      id: 4,
      title: "健康管理APP",
      description: "结合可穿戴设备的个人健康管理平台，提供健康监测和建议",
      category: "医疗健康",
      stage: "MVP阶段",
      funding: "种子轮",
      fundingAmount: "300万",
      location: "上海",
      founder: {
        name: "陈医生",
        avatar: "/placeholder.svg?height=40&width=40",
        title: "三甲医院主任医师",
      },
      teamSize: 6,
      lookingFor: ["技术合伙人", "UI设计师"],
      highlights: ["医疗资源丰富", "用户留存率85%", "获得医疗器械许可"],
      tags: ["健康", "医疗", "可穿戴"],
      postedDate: "2天前",
      views: 750,
      likes: 45,
      bookmarks: 19,
      equity: "8-12%",
      commitment: "全职",
    },
    {
      id: 5,
      title: "农产品溯源平台",
      description: "基于区块链技术的农产品全链路溯源系统，保障食品安全",
      category: "农业科技",
      stage: "产品验证",
      funding: "天使轮",
      fundingAmount: "800万",
      location: "成都",
      founder: {
        name: "刘农",
        avatar: "/placeholder.svg?height=40&width=40",
        title: "农业专家+区块链工程师",
      },
      teamSize: 10,
      lookingFor: ["商务拓展", "政府关系"],
      highlights: ["合作农场200+", "政府试点项目", "区块链专利技术"],
      tags: ["区块链", "农业", "溯源"],
      postedDate: "1天前",
      views: 420,
      likes: 28,
      bookmarks: 12,
      equity: "4-10%",
      commitment: "兼职可",
    },
    {
      id: 6,
      title: "在线职业培训平台",
      description: "面向职场人士的在线技能培训平台，提供认证课程和就业指导",
      category: "在线教育",
      stage: "规模化",
      funding: "B轮",
      fundingAmount: "5000万",
      location: "广州",
      founder: {
        name: "赵老师",
        avatar: "/placeholder.svg?height=40&width=40",
        title: "前新东方教学总监",
      },
      teamSize: 25,
      lookingFor: ["财务总监", "人力资源"],
      highlights: ["注册用户50万", "年收入1亿", "行业领先地位"],
      tags: ["教育", "职业培训", "在线学习"],
      postedDate: "4天前",
      views: 1800,
      likes: 134,
      bookmarks: 67,
      equity: "0.5-2%",
      commitment: "全职",
    },
  ]

  const filteredProjects = projects.filter((project) => {
    const matchesSearch =
      project.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      project.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
      project.tags.some((tag) => tag.toLowerCase().includes(searchQuery.toLowerCase()))

    const matchesCategory = selectedCategory === "all" || project.category === selectedCategory
    const matchesStage = selectedStage === "all" || project.stage === selectedStage
    const matchesFunding = selectedFunding === "all" || project.funding === selectedFunding

    return matchesSearch && matchesCategory && matchesStage && matchesFunding
  })

  const handleContactProject = (project: any) => {
    alert(`联系项目：${project.title}`)
  }

  const handleBookmarkProject = (projectId: number) => {
    alert(`收藏项目 ID: ${projectId}`)
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-purple-50/30">
      {/* 顶部导航 */}
      <header className="bg-white/80 backdrop-blur-xl border-b border-slate-200/50 sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <Button variant="ghost" size="sm" onClick={() => router.back()}>
                <ArrowLeft className="w-4 h-4 mr-2" />
                返回
              </Button>
              <div>
                <h1 className="text-xl font-bold text-slate-900">找项目</h1>
                <p className="text-sm text-slate-600">发现优质创业项目机会</p>
              </div>
            </div>
            <Badge className="bg-yellow-100 text-yellow-700">{filteredProjects.length} 个项目</Badge>
          </div>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-6 py-8">
        {/* 搜索和筛选 */}
        <Card className="mb-8 bg-white/70 backdrop-blur-sm border-0">
          <CardContent className="p-6">
            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
              <div className="relative">
                <Search className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400" />
                <Input
                  placeholder="搜索项目名称、描述、标签..."
                  className="pl-10"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>
              <Select value={selectedCategory} onValueChange={setSelectedCategory}>
                <SelectTrigger>
                  <SelectValue placeholder="选择行业" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">所有行业</SelectItem>
                  <SelectItem value="教育科技">教育科技</SelectItem>
                  <SelectItem value="出行交通">出行交通</SelectItem>
                  <SelectItem value="智能硬件">智能硬件</SelectItem>
                  <SelectItem value="医疗健康">医疗健康</SelectItem>
                  <SelectItem value="农业科技">农业科技</SelectItem>
                  <SelectItem value="在线教育">在线教育</SelectItem>
                </SelectContent>
              </Select>
              <Select value={selectedStage} onValueChange={setSelectedStage}>
                <SelectTrigger>
                  <SelectValue placeholder="项目阶段" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">所有阶段</SelectItem>
                  <SelectItem value="MVP阶段">MVP阶段</SelectItem>
                  <SelectItem value="产品验证">产品验证</SelectItem>
                  <SelectItem value="规模化">规模化</SelectItem>
                </SelectContent>
              </Select>
              <Select value={selectedFunding} onValueChange={setSelectedFunding}>
                <SelectTrigger>
                  <SelectValue placeholder="融资轮次" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">所有轮次</SelectItem>
                  <SelectItem value="种子轮">种子轮</SelectItem>
                  <SelectItem value="天使轮">天使轮</SelectItem>
                  <SelectItem value="A轮">A轮</SelectItem>
                  <SelectItem value="B轮">B轮</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </CardContent>
        </Card>

        {/* 项目列表 */}
        <div className="space-y-6">
          {filteredProjects.map((project) => (
            <Card
              key={project.id}
              className="bg-white/70 backdrop-blur-sm border-0 hover:shadow-lg transition-all duration-200"
            >
              <CardContent className="p-6">
                <div className="flex items-start justify-between mb-4">
                  <div className="flex-1">
                    <div className="flex items-center space-x-3 mb-2">
                      <h3 className="text-xl font-semibold text-slate-900">{project.title}</h3>
                      <Badge className="bg-blue-100 text-blue-700">{project.category}</Badge>
                      <Badge variant="outline">{project.stage}</Badge>
                    </div>
                    <p className="text-slate-600 mb-3 line-clamp-2">{project.description}</p>

                    <div className="flex items-center space-x-6 text-sm text-slate-500 mb-4">
                      <div className="flex items-center space-x-1">
                        <MapPin className="w-4 h-4" />
                        <span>{project.location}</span>
                      </div>
                      <div className="flex items-center space-x-1">
                        <Users className="w-4 h-4" />
                        <span>{project.teamSize} 人团队</span>
                      </div>
                      <div className="flex items-center space-x-1">
                        <DollarSign className="w-4 h-4" />
                        <span>
                          {project.funding} - {project.fundingAmount}
                        </span>
                      </div>
                      <div className="flex items-center space-x-1">
                        <Clock className="w-4 h-4" />
                        <span>{project.postedDate}</span>
                      </div>
                    </div>
                  </div>

                  <Button variant="ghost" size="sm" onClick={() => handleBookmarkProject(project.id)}>
                    <Bookmark className="w-4 h-4" />
                  </Button>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-4">
                  <div>
                    <h4 className="font-medium text-slate-900 mb-2">创始人信息</h4>
                    <div className="flex items-center space-x-3">
                      <Avatar className="w-10 h-10">
                        <AvatarImage src={project.founder.avatar || "/placeholder.svg"} alt={project.founder.name} />
                        <AvatarFallback>{project.founder.name.charAt(0)}</AvatarFallback>
                      </Avatar>
                      <div>
                        <p className="font-medium text-slate-900">{project.founder.name}</p>
                        <p className="text-sm text-slate-600">{project.founder.title}</p>
                      </div>
                    </div>
                  </div>

                  <div>
                    <h4 className="font-medium text-slate-900 mb-2">招募岗位</h4>
                    <div className="flex flex-wrap gap-2">
                      {project.lookingFor.map((role, index) => (
                        <Badge key={index} variant="outline" className="bg-green-50 text-green-700">
                          {role}
                        </Badge>
                      ))}
                    </div>
                    <div className="mt-2 text-sm text-slate-600">
                      <span>
                        股权：{project.equity} | {project.commitment}
                      </span>
                    </div>
                  </div>
                </div>

                <div className="mb-4">
                  <h4 className="font-medium text-slate-900 mb-2">项目亮点</h4>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-2">
                    {project.highlights.map((highlight, index) => (
                      <div key={index} className="flex items-center space-x-2 text-sm text-slate-600">
                        <TrendingUp className="w-3 h-3 text-green-500" />
                        <span>{highlight}</span>
                      </div>
                    ))}
                  </div>
                </div>

                <div className="flex items-center justify-between">
                  <div className="flex items-center space-x-4">
                    <div className="flex flex-wrap gap-1">
                      {project.tags.map((tag, index) => (
                        <Badge key={index} variant="outline" className="text-xs">
                          {tag}
                        </Badge>
                      ))}
                    </div>
                    <div className="flex items-center space-x-4 text-sm text-slate-500">
                      <div className="flex items-center space-x-1">
                        <Eye className="w-3 h-3" />
                        <span>{project.views}</span>
                      </div>
                      <div className="flex items-center space-x-1">
                        <Heart className="w-3 h-3" />
                        <span>{project.likes}</span>
                      </div>
                    </div>
                  </div>

                  <div className="flex space-x-2">
                    <Button variant="outline" size="sm">
                      详情
                    </Button>
                    <Button size="sm" onClick={() => handleContactProject(project)}>
                      <MessageCircle className="w-3 h-3 mr-1" />
                      联系
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

        {filteredProjects.length === 0 && (
          <div className="text-center py-12">
            <Lightbulb className="w-16 h-16 text-slate-300 mx-auto mb-4" />
            <h3 className="text-lg font-medium text-slate-900 mb-2">暂无匹配的项目</h3>
            <p className="text-slate-600">尝试调整搜索条件或筛选器</p>
          </div>
        )}
      </main>
    </div>
  )
}
